<template>
    <div class="pulldown-panle-wrap" v-click-out="handleBlur">
        <input 
            class="custom-input" 
            ref="inputRef"
            v-model="inputValue" 
            @focus="handleFocus"  
            type="text" 
            placeholder="请选择">
        <transition name="fade">
            <div 
                :style="{ width: referHeight + 'px'}" 
                ref="pulldownBodyRef"
                v-if="isVisible" 
                id="pulldown-body" 
                :class="['pulldown-body', { 'is-active-panle': false }]">
                <ul class="pull-list-view">
                    <li 
                        :class="[{ 'is-active': item.label === inputValue}]"
                        v-for="(item, index) in cityList" 
                        :key="index" 
                        @click="onSelected(item, index)">
                        {{ item.label }}
                    </li>
                </ul>
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script setup lang="js">
    import { ref, onMounted, nextTick } from "vue"
    import { createPopper } from "@popperjs/core"

    const inputRef = ref(null)
    const pulldownBodyRef = ref(null)
    const isVisible = ref(false)
    const popperInstance = ref(null)
    const referHeight = ref(0)
    const inputValue = ref('')
    const cityList = ref([
        {
            value: 'New York',
            label: 'New York'
        },
        {
            value: 'London',
            label: 'London'
        },
        {
            value: 'Sydney',
            label: 'Sydney'
        },
        {
            value: 'Ottawa',
            label: 'Ottawa'
        },
        {
            value: 'Paris',
            label: 'Paris'
        },
        {
            value: 'Canberra',
            label: 'Canberra'
        }
    ])

    // 选中数据
    const onSelected = (item, index) => {
        inputValue.value = item.value
        handleBlur()
    }
   
    // 获得焦点打开面板
    const handleFocus = () => {
        isVisible.value = true
        nextTick(() => {
            popperInstance.value = createPopper(inputRef.value, pulldownBodyRef.value, {
                placement: 'bottom',
                strategy: 'absolute',
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [0, 9],
                        },
                    },
                ],
            })
        })
    }

    // 失去焦点关闭面板
    const handleBlur = () => {
        isVisible.value = false
        if (popperInstance.value) {
            popperInstance.value.destroy()
            popperInstance.value = null
        }
    }

    function updatePopperWidth() {
        const { width } = inputRef.value.getBoundingClientRect()
        referHeight.value = width
        // 更新容器位置
        if (popperInstance.value) {
            popperInstance.value.update();
        }
    }

    // 监听窗口大小变化，以确保 popperElement 的宽度保持一致
    window.addEventListener('resize', updatePopperWidth);

    onMounted(() => {
        updatePopperWidth()
    })
</script>

<style lang="scss">
    .pulldown-panle-wrap {
        text-align: center;
        overflow: hidden;
        .custom-input {
            width: 100%;
            padding: 5px;
            border-radius: 4px;
            outline: none;
            border: 1px solid #666;
        }
    }
    .pulldown-body[data-popper-placement^='bottom'] {
        .arrow {
            top: -4px;
        }
    }
    .pulldown-body[data-popper-placement^='top'] {
        .arrow {
            bottom: -4px;
        }
    }
    .pulldown-body[data-popper-placement^='left'] {
        .arrow {
            right: 0px;
        }
    } 

    .pulldown-body[data-popper-placement^='right'] {
        .arrow {
            left: -8px;
        }
    }
    .arrow,
    .arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        background: inherit;
    }
    .arrow {
        visibility: hidden;
        position: absolute;
    }
    .arrow::before {
        visibility: visible;
        content: "";
        transform: rotate(45deg);
    }
    .pulldown-body {
        border-radius: 8px;
        font-weight: bold;
        font-size: 13px;
        border-radius: 4px;
        z-index: 999;
        overflow: hidden;
        padding: 4px 8px;
        border: 1px solid #666;
        background: #FFF;
        .pull-list-view {
            li {
                text-align: left;
                padding: 6px 7px;
                &.is-active {
                    color: #409eff;
                    background: #f6f6f6;
                }
                &:hover {
                    background: #f6f6f6;
                }
            }
        }
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>